<script xmlns="http://www.w3.org/1999/html">
import {UploadFilled} from "@element-plus/icons-vue"
import request from "@/utils/request";

export default {
  name: "fileUpload",
  props: {
    url: {
      type: String,
      default: "http://101.42.248.84:9066/files/upload/minio",
    },
    dialogShow: {
      default: false
    }
  }, components: {UploadFilled},
  methods: {
    dialogClose() {
      console.log("关闭")
      this.$emit("onClose");
    },
    isBucketSelected() {
      if (this.bucket == null || this.bucket == "") {
        this.$message.error("请先选择存储桶")
        return false;
      }
      return true;
    }
  },
  data() {
    return {
      urlPath: this.url,
      dialogV: this.dialogShow,
      bucket: "",
      bucketList: []
    }
  },
  watch: {
    dialogShow() {
      this.dialogV = this.dialogShow
    }
  },
  created() {
    request.get("/files/bucketList").then(res => {
      this.bucketList = res.data;
    })
  }
}
</script>

<template>
  <el-dialog v-model="dialogV" title="文件上传" width="500" @close="dialogClose()">
    <el-select v-model="bucket" size="large">
      <template #prefix>存储桶&nbsp;</template>
      <el-option v-for="item in bucketList" :value="item">{{ item }}</el-option>
    </el-select>
    <el-upload
        class="upload-demo"
        drag
        :action="this.urlPath"
        :before-upload="isBucketSelected"
        :data="{bucketName:bucket}"
        multiple
    >
      <el-icon class="el-icon--upload">
        <upload-filled/>
      </el-icon>
      <div class="el-upload__text">
        拖动文件到窗口 或 <em>点击此处</em> 上传文件
      </div>
      <template #tip>
        <div class="el-upload__tip">
          jpg/png files with a size less than 500kb
        </div>
      </template>
    </el-upload>
  </el-dialog>
</template>

<style scoped>

</style>